$(function () {
    loadList()
    function loadList() {
        $.ajax({
            type: "get",
            url: '/wzmanage/contrast/getContrastData',
            success: function (data) {
                $(".spinner").fadeOut()
                if (data instanceof Array&&data.length>0) {
                    for(var i=0;i<data.length-1;i++){
                        for(var j=0;j<data.length-1-i;j++){
                            if(data[j].station >data[j+1].station){
                                var  temp = data[j];
                                data[j] = data[j+1];
                                data[j+1] = temp;
                            }
                        }
                    }
                    // var stationName=station(data,"station")
                    var stationName=["乐清","永嘉","鹿城区","平阳","瑞安"," 洞头","泰顺","文成"]
                    var rain=stationRain(data,stationName)
                    var actualMax=station(data,"actualMax")
                    var actualMin=station(data,"actualMin")
                    var actualRx=station(rain,"actualNum")
                    var foreMax=station(data,"foreMax")
                    var foreMin=station(data,"foreMin")
                    var foreRx=station(rain,"foreNum")
                    drawChart(stationName, actualMax,foreMax,"温度℃：昨日实况与与预报对比",rain)
                    $("#echar ul").unbind();
                    $("#echar ul").on("click","li",function(){
                        $(this).addClass("active").siblings(".active").removeClass("active");
                        var index=$(this).index()
                        switch (index){
                            case 0:drawChart(stationName, actualMax,foreMax,"温度℃：昨日实况与预报对比")
                                break;
                            case 1:drawChart(stationName, actualMin,foreMin,"温度℃：昨日实况与预报对比");
                                break;
                            case 2:drawChartRain(stationName, actualRx,foreRx,"降雨：昨日实况与预报对比",rain);break
                            default:break;
                        }
                    })
                }else{
                    $("#main").html("<h1>此时暂无数据</h1>")
                }
            }
        })
    }
    //绘制图表
    function drawChart(datax, datay1,datay2,text) {
        $(myChart).unbind()
        var myChart = echarts.init(document.getElementById('main'));
        var yMax = 30;
        var option = {
            title: {
                text:text
            },
            tooltip: {
                trigger: "axis",
                formatter:function(params){
                    var html=''
                    html=params[0].name
                    for(var i=0;i<params.length;i++){
                        console.log(params)
                            html+='<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:'+params[i].color+'"></span>'+params[i].seriesName+params[i].value
                    }
                    return html

                }
            },
            legend: {
                show:true,
                data:['实况','预报']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                data: datax,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#999'
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                min:0,
                // max: yMax,
                // interval: 6,
                axisLabel: {
                    show:true,
                    formatter: '{value}',
                    tStyle: {
                        color: '#999'
                    }

                }
            }],

            series: [{
                name: '实况',
                type: 'bar',
                data:datay1,
                barWidth: 30,
                label: {
                    normal: {
                        show: true,
                        position: 'outside',
                        formatter: '{c}' // 这里是数据展示的时候显示的数据
                    }
                },

                itemStyle: {
                    normal: {
                        color: '#53B4FF',

                    }
                }
            }, {
                name: '预报',
                type: 'bar',
                data: datay2,
                barWidth: 30,
                label: {
                    normal: {
                        show: true,
                        position: 'outside',
                        formatter: '{c}' // 这里是数据展示的时候显示的数据
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#56F368'
                    }
                }
            }]
        };
        myChart.setOption(option);

    }
    function drawChartRain(datax, datay1,datay2,text,rain) {

        var myChart = echarts.init(document.getElementById('main'));
        var yMax = 30;
        var option = {
            title: {
                text:text
            },
            tooltip: {
                trigger: "axis",
                formatter:function(params){
                    for(var i=0,html='';i<rain.length;i++){

                        if(rain[i].name==params[0].name){
                            html=rain[i].name+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#53B4FF;"></span>实况：'+rain[i].actual+'<br><span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:#56F368;"></span>预报：'+rain[i].fore
                                return html

                        }
                    }

                }
            },
            legend: {
                show:true,
                data:['实况','预报']
            },
            toolbox: {
                show: true,
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            calculable: true,
            xAxis: [{
                type: 'category',
                data: datax,
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#999'
                    }
                }
            }],
            yAxis: [{
                type: 'value',
                // max: yMax,
                // interval: 6,
                axisLabel: {
                    show:false,
                    formatter: '{value}',
                    tStyle: {
                        color: '#999'
                    }

                }
            }],

            series: [{
                name: '实况',
                barMinHeigh:1,
                toggle:["hello"],
                type: 'bar',
                data:datay1,
                barWidth: 30,
                label: {
                    normal: {
                        show: false,
                        position: 'outside',
                        formatter: '' // 这里是数据展示的时候显示的数据
                    }
                },

                itemStyle: {
                    normal: {
                        color: '#53B4FF',

                    }
                }
            }, {
                name: '预报',
                type: 'bar',
                barMinHeigh:3,
                data: datay2,
                barWidth: 30,
                label: {
                    normal: {
                        show: false,
                        position: 'outside',
                        formatter: '' // 这里是数据展示的时候显示的数据
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#56F368'
                    }
                }
            }]
        };
        myChart.setOption(option);
        option=null;
    }
    // 获得站点数组
    function station(data,names){
        var arr=[]
        data.forEach(function(val){
            arr.push(val[names]);
        })
        return arr;
    }
    // 使用刚指定的配置项和数据显示图表。
    function bettween(windd, l, h) {
        if (l <= windd && windd < h) return true;
        else return false;
    }
    function rainFormat(rain) {
        var w = parseFloat(rain);
        if (bettween(w, 0, .1)) {
            return {weather:"晴",num:.5};
        } else if (bettween(w, .1, 9.9)) {
            return　 {weather:"小雨",num:5};
        } else if (bettween(w, 9.9, 24.9)) {
            return  {weather:"中雨",num:10};
        } else if (bettween(w, 24.9, 49.9)) {
            return　 {weather:"大雨",num:15};
        } else if (bettween(w, 49.9, 99.9)) {
            return  {weather:"暴雨",num:20};
        } else if (bettween(w, 99.9, 250)) {
            return　 {weather:"大暴雨",num:25};
        } else if (w>250) {
            return {weather:"特大暴雨",num:30};
        }
        return {weather:"晴",num:.5};
    }
    function stationRain(data,stationName){
        var arr=[]
        for(var i=0;i<data.length;i++){
            var actual=rainFormat(data[i].actualRx)
            var fore=stationFore(data[i].foreRx)
            if(actual.weather==fore.weather){
                arr.push({name:stationName[i],actual:actual.weather,fore:fore.weather,actualNum:30,foreNum:30})
            }else{
                arr.push({name:stationName[i],actual:actual.weather,fore:fore.weather,actualNum:actual.num,foreNum:fore.num})
            }

        }
        return arr;
    }
    function stationFore(data){
        var data=parseInt(data)
        switch (data){
            case 0:
                return {weather:"晴",num:.5};
            case 7:
                return　 {weather:"小雨",num:5};
            case 8:
                return  {weather:"中雨",num:10};
            case 9:
                return　 {weather:"大雨",num:15};
            case 10:
                return  {weather:"暴雨",num:20};
            case 11:
                　return　 {weather:"大暴雨",num:25};
            case 12:
                return　 {weather:"特大暴雨",num:30};
            default: return　{weather:"晴",num:.5}

        }
    }
})